import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 导入element-ui及样式
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 引入全局样式，尽量在三方组件样式之后,防止被层叠覆盖
import './assets/global.less'

// 导入axios,配置基础路径
import axios from 'axios'
axios.defaults.baseURL = 'http://www.liulongbin.top:3008'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
Vue.use(VueQuillEditor)

// 配置全局前置路由守卫,进行权限控制-->没有登陆且跳转页不是白名单时,跳转登录页
// 参数一：to代表需要跳转的路径
// 参数二：from代表从哪里跳转(即当前路径)
// 参数一：next是必须调用的函数(不调用会卡在这),不写参数表示放行,参数为false表示不放行,参数为路径表示下一级跳转
router.beforeEach((to, from, next) => {
  // console.log(store)
  // console.dir(Vue)
  // 定义白名单数组-->无需登录就能访问的路由路径
  const whiteList = ['/login', '/reg']
  if (!store.state.user.token && !whiteList.includes(to.path)) {
    // 由于已经将element-ui注册为Vue实例插件,所以在Vue上能直接使用$store的方法
    Vue.prototype.$message.error('请先登录')
    return next('/login')
  }
  next()
})

// 配置请求拦截器,给非/my路径开头的请求添加token
axios.interceptors.request.use((config) => {
  // console.log(config)
  if (config.url.startsWith('/my')) {
    config.headers.Authorization = store.state.user.token
    // console.log(store)
  }
  return config
}, (error) => {
  return Promise.reject(error)
})
// 配置响应拦截器,当用户的token错误或者失效时,需要让用户重新登陆,并清空token和用户数据
axios.interceptors.response.use((response) => {
  return response
}, (error) => {
  // console.dir(error)
  if (error.response.status === 401) {
    // console.log(store)
    // 这里需要调用mutations中的方法来清空vuex数据
    store.commit('user/updateToken', '')
    // store.state.userInfo = {}
    store.commit('user/updateUserInfo', {})
    router.push('/login')
    Vue.prototype.$message.error('身份认证失败')
  }
  return Promise.reject(error)
})

Vue.use(ElementUi)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
